;(() => {
  let link = document.createElement('link')
  link.href = `${config.RP}/templates/my-menu/my-menu.css`
  link.rel = 'stylesheet'
  document.head.appendChild(link)
})()

const { watch, getCurrentInstance } = Vue
let template = {
  name: 'my-menu',
  data() {
    return {
      menuList: [
        { route: 'user', icon: 'icon-zhanghao', tittle: '用户管理' },
        { route: 'book', icon: 'icon-database-fill', tittle: '图书管理' },
        { route: 'book_type', icon: 'icon-dian', tittle: '类型管理' },
        { route: 'author', icon: 'icon-gongzuorenyuan1', tittle: '作者管理' },
      ],
      currentRoute: app.route.hash,
    }
  },
  setup() {
    const { proxy } = getCurrentInstance()

    watch(app.route.hash, (next) => {
      proxy.currentRoute = next
    })
  },
  methods: {
    handleMenuSelect(route) {
      app.route.to(route)
    },
  },
  template: '',
}

export default {
  async load() {
    return fetch(`${config.RP}/templates/my-menu/my-menu.html`)
      .then((res) => res.text())
      .then((html) => {
        template.template = html
        window.app.component('my-menu', template)
      })
  },
}
